<template>
  <div class="get-address"  v-if="show" @click.self="close">
    <div
      class="content"  :style="{bottom: selfShow ? '0' : '-100%'}">
      <div class="title">
        <div
          class="finish"
          @click="jump ({ name: 'travel.items'})">管理</div>
        <div class="center">选择出行人</div>
        <div class="add" @click="submit" v-if="items.length > 0">确定</div>
        <div class="add" @click="jump ({ name: 'travel.add'})" v-else>添加</div>
      </div>
      <div class="search">
        <input type="text" placeholder="输入名字搜索" v-model="search">
      </div>
      <div class="scroll" v-scroll="getItems">
        <template v-for="(item, idx) in items">
          <div class="item" :key="idx" @click="select(idx)">
            <div class="iconfont icon" :class="{active: item.checked}">
              <span class="unselected">&#xe667;</span>
              <span class="selected">&#xe618;</span>
            </div>
            <div class="person-info">
              <div class="info">
                <div class="name" v-html="item.name.replace(search,'<span style=\'color: red\'>'+ search +'</span>')"></div>
                <div class="mobile">{{item.mobile}}</div>
              </div>
              <div class="address-detail">
                &nbsp;{{sex[item.sex]}}
                &nbsp;{{type[item.type]}}
                &nbsp;证件号
                <template>&nbsp;{{item.certificate_number}}&nbsp;({{certificate[item.certificate_type]}})</template>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    defaultId: {
      default: 0
    },
    show: {
      type: Boolean,
      default: false
    },
    defaultData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      certificate: {
        1: '大陆身份证',
        2: '香港证件',
        3: '澳门证件',
        4: '台湾证件',
        5: '护照'
      },
      sex: {
        1: '男',
        2: '女'
      },
      type: {
        1: '成人',
        2: '儿童'
      },
      items: [],
      tmpItems: [],
      page: 1,
      loaded: false,
      size: 50,
      selfShow: false,
      defaultIds: [],
      search: '',
      auto: null
    }
  },
  watch: {
    search (val) {
      if (this.auto) {
        clearTimeout(this.auto)
      }
      setTimeout(() => {
        this.items = this.tmpItems.filter(item => {
          return item.name.indexOf(this.search) >= 0
        })
      }, 400)
    },
    tmpItems (val) {
      this.items = val
    },
    defaultData (val) {
      this.defaultIds = []
      val.map(item => {
        this.defaultIds.push(item.id)
      })
    },
    show (val) {
      if (val) {
        this.defaultIds = []
        this.defaultData.map(item => {
          this.defaultIds.push(item.id)
        })
        this.loaded = false
        this.page = 1
        this.getItems()
        // this.getAddress()
        setTimeout(() => {
          this.selfShow = val
        }, 50)
      }
    }
  },
  methods: {
    /**
     * 提交数据
     */
    submit () {
      let data = []
      this.items.map(item => {
        if (item.checked) {
          data.push(item)
        }
      })
      if (data.length < 1) {
        this.toast('请至少选择一个出行人...!')
        return false
      }
      this.$emit('submit', data)
      this.close()
    },
    /**
     * 选择数据
     */
    select (idx) {
      this.items = this.items.map((item, _idx) => {
        if (idx === _idx) {
          item.checked = !item.checked
        }
        return item
      })
    },
    /**
     * @purpose 获取数据
     * @returns {boolean}
     */
    getItems () {
      if (this.loaded) {
        return false
      }
      this.showLoading()
      this
        .$api
        .travel
        .items(this.page, this.size)
        .then(r => {
          r.list = r.list.map(item => {
            item.checked = this.inArray(item.id, this.defaultIds)
            return item
          })
          if (this.page < 2) {
            this.tmpItems = r.list
          } else {
            this.tmpItems = this.tmpItems.concat(r.list)
          }
          if (r.list.length < this.size) {
            this.loaded = true
          } else {
            this.page++
          }
        })
    },
    close () {
      this.selfShow = false
      setTimeout(() => {
        this.$emit('update:show', false)
      }, 300)
    }
  }

}
</script>
<style scoped lang="sass">
  .get-address
    width: 100%
    height: 100%
    background-color: rgba(0,0,0,0.8)
    position: absolute
    top: 0
    left: 0
    display: flex
    justify-content: center
    max-width: 640px
    .content
      width: 100%
      max-width: 640px
      height: calc(80% + 50px)
      position: absolute
      bottom: -100%
      background-color: #ffffff
      transition: all .3s
      -webkit-backface-visibility: hidden
      -moz-backface-visibility: hidden
      -ms-backface-visibility: hidden
      backface-visibility: hidden
      -webkit-perspective: 1000
      -moz-perspective: 1000
      -ms-perspective: 1000
      perspective: 1000
      .title
        width: 100%
        height: 50px
        background-color: #ebebeb
        display: flex
        align-items: center
        justify-content: center
        .finish,.add
          width: 50px
          height: 100%
          display: flex
          align-items: center
          justify-content: center
          font-size: .8rem
          color: rgb(9,123,237)
        .center
          flex: 1
          height: 100%
          display: flex
          align-items: center
          justify-content: center
          font-size: .8rem
      .search
        width: calc(100% - 10px)
        height: 50px
        padding: 0 5px
        display: flex
        align-items: center
        input
          flex: 1
          height: 40px
          background-color: #f4f4f4
          font-size: 1rem
          padding: 0 5px
      .scroll
        width: 100%
        height: calc(100% - 100px)
        overflow-x: hidden
        overflow-y: auto
        -webkit-overflow-scrolling: touch
        overflow-scrolling: touch
        .item
          width: calc(100% - 20px)
          height: 6rem
          padding: 0 10px
          border-bottom: 1px solid #ebebeb
          display: flex
          align-items: center
          &:active
            background-color: #ebebeb
          .icon
            width: calc(1.1rem + 10px)
            height: 100%
            display: flex
            align-items: center
            font-size: 1.1rem
            color: #999999
            .selected
              color: #ff4700
              display: none
            &.active
              .selected
                display: flex
              .unselected
                display: none
          .person-info
            flex: 1
            height: 100%
            font-weight: bold
            .info
              width: 100%
              height: 3rem
              display: flex
              align-items: center
              .name,.mobile
                flex: 1
                font-size: 1rem
                color: #565656
              .mobile
                text-align: right
            .address-detail
              width: 100%
              height: 3rem
              font-size: .8rem
              line-height: 1rem
              color: #565656
              .default
                color: #ff4700
</style>
